<template>
  <view v-if="goods" class="page-body">
    <div class="header u-p-t-24">
      <div v-if="pt_msg" class="pt-msg u-m-l-24 u-m-r-24 u-m-b-24">
        <view>
          <image class="user-img" :src="pt_msg.avatar" mode="scaleToFill" />
          <div class="msg">
            {{ pt_msg.name }}拼单成功，节省了{{ pt_msg.diff_price }}元
          </div>
        </view>
      </div>

      <GoodsList :goodsList="[goods]" hideBt></GoodsList>

      <div class="invitation u-m-l-24 u-m-r-24">
        <div class="font-w-600 u-font-34">
          快呼唤小伙伴参加，最高<text style="color: #f0250e"
            >省{{ order.diff_price }}元</text
          >
        </div>
        <div v-if="order.status == 2" class="u-m-t-12">
          仅剩
          <text style="color: #f0250e" v-if="!order.party_type"
            >{{ order.surplus_num }}人</text
          >
          <text v-else style="color: #f0250e"
            >{{ order.surplus_num_goods }}件</text
          >
          拼成，
          <u-count-down
            class="u-m-r-10 count-down"
            bg-color="#000"
            color="#fff"
            font-size="24"
            :timestamp="order.end_time"
          ></u-count-down>
          后结束
        </div>

        <scroll-view scroll-x style="width: 100%">
          <div class="user-list">
            <div class="user" v-for="(user, i) in order.user_list" :key="i">
              <div class="sponsor" v-if="!i">发起人</div>
              <div class="user-avatar">
                <image :src="user.avatar" mode="aspectFill" />
              </div>
            </div>
            <div
              class="user user-1"
              v-for="(user, i) in order.surplus_num"
              :key="i"
            >
              <div class="user-avatar">
                <image src="" mode="aspectFill" />
              </div>
            </div>
          </div>
        </scroll-view>
        <!-- 正在拼团 -->
        <template v-if="order.status == 2 || order.status == 0">
          <div class="bts">
            <button
              v-if="order.status == 2"
              open-type="share"
              class="u-reset-button yq"
            >
              邀请好友
            </button>
            <div
              v-if="
                order.status == 0 ||
                (order.party_type == 1 && order.surplus_num_goods)
              "
              class="buy u-m-l-22"
              @click="clickBuyBt"
            >
              立即购买
            </div>
          </div>
        </template>

        <!-- 拼团成功 -->
        <template v-else-if="order.status == 3">
          <div class="u-m-t-12 u-font-40 font-w-600" style="">拼团成功</div>
          <div class="bts u-m-t-50">
            <div
              @click="
                $utils.toUrl(
                  '/order/order-detail/order-detail?id=' + order.order_id
                )
              "
              class="yq"
            >
              查看订单
            </div>
          </div>
        </template>
        <!-- 拼团失败 -->
        <template v-else>
          <div class="u-m-t-12 u-font-40 font-w-600" style="">拼团失败</div>
          <div class="bts u-m-t-50">
            <div
              @click="
                $utils.toUrl(`/goods/goods/goods?id=${goods.id}&is_pt=true`)
              "
              class="yq"
            >
              重新开团
            </div>
          </div>
        </template>
      </div>
    </div>

    <div
      class="pt-lc u-m-24"
      :style="{
        background: `url(${asyncImgs.pintuan.goods_lc}) center / contain no-repeat`,
      }"
    >
      <view class="title">拼团流程</view>
      <view class="lc-list">
        <div class="item">
          <view class="font-w-600">参与拼团</view>
          <view class="color-999 u-font-24 u-m-t-4">选择拼团爆品</view>
        </div>
        <div class="item">
          <view class="font-w-600">邀用户参团</view>
          <view class="color-999 u-font-24 u-m-t-4">共享低价免运费</view>
        </div>
        <div class="item">
          <view class="font-w-600">{{
            order.party_type == 0 ? "人满发货" : "订单满发货"
          }}</view>
          <view class="color-999 u-font-24 u-m-t-4">不满自动退款</view>
        </div>
      </view>

      <div class="pt-gz-box">
        <div class="left">
          <text class="iconfont icon-prompt u-font-34 u-m-r-6"></text>
          拼团不与商品促销、优惠活动同享
        </div>
        <div class="right color-999" @click="$utils.toUrl('/pt/rule/index')">
          全部规则
          <text class="iconfont icon-arrow-right u-font-24 color-333"></text>
        </div>
      </div>
    </div>

    <div class="other u-m-t-24">
      <div class="u-font-30 font-w-600 u-m-24">大家都在拼</div>
      <GoodsList :goodsList="goodsList"> </GoodsList>

      <div class="u-p-b-24">
        <u-loadmore :status="loadmoreStatus"></u-loadmore>
      </div>
    </div>

    <!-- sku弹框 -->
    <GoodsAddCart
      :good="goodsOfAdd"
      type="confirm"
      @confirm="attrConfirm"
    ></GoodsAddCart>
  </view>
</template>
<script>
import GoodsList from "@/pt/index/components/GoodsList";
import GoodsAddCart from "@/components/diyNew/goodsAddCart/index.vue";

export default {
  components: {
    GoodsList,
    GoodsAddCart,
  },
  data() {
    return {
      pt_number: "",
      loadmoreStatus: "loadmore",
      page: {
        pageNo: 1,
        pageSize: 10,
      },
      goodsList: [],
      order: "",
      goods: "",
      pt_msg: "",
      timer: false, //计时器
      goodsOfAdd: {},
      goodsInfo: {},
      pt_order_id: "",
    };
  },
  onLoad(params) {
    if (params.pt_order_id) this.pt_order_id = params.pt_order_id;
    this.pt_number = params.pt_number || "";
    this.loadData(false, false).then(() => {
      this.getList();
    });
  },
  onShow() {
    if (!this.timer) {
      this.timer = setInterval(() => {
        this.loadData(false, false);
      }, 5000);
    }
  },
  methods: {
    async loadData(reset, fn) {
      const res = await this.$allrequest.pt.getOrderInfo({
        pt_number: this.pt_number,
        pt_order_id: this.pt_order_id,
      });
      this.goods = res.data.goods;
      this.order = res.data.order;
      this.pt_msg = res.data.pt_msg;
      fn && fn();
    },
    // 过去拼团广场列表
    async getList(reset) {
      if (reset) {
        let { loadmoreStatus, goodsList, page } = this.$options.data();
        this.page = page;
        this.goodsList = goodsList;
        this.loadmoreStatus = loadmoreStatus;
      }

      if (this.loadmoreStatus == "nomore") return;

      const res = await this.$allrequest.pt.getPtGoodsList(
        {
          ...this.page,
          cat_id: 0,
        },
        true
      );
      this.page.pageNo++;
      this.goodsList.push(...res.data.list);
      this.loadmoreStatus =
        this.goodsList.length >= res.data.totalCount ? "nomore" : "loadmore";
    },
    clickBuyBt() {
      this.goodsOfAdd = JSON.parse(
        JSON.stringify({ ...this.goods, is_pt: "1" })
      );
      setTimeout(() => {
        this.goodsOfAdd = {};
      }, 1);
    },
    attrConfirm(params) {
      let submitOrder = [
        {
          product_type: 0,
          mch_id: this.goods.mch ? this.goods.mch.id : 0,
          goods_list: [
            {
              goods_id: this.goods.id,
              num: params.num,
              attr: JSON.parse(params.attr),
            },
          ],
        },
      ];
      // 如果选择拼团提交订单预览携带拼团id 0表示开团 >0表示拼团
      let url = `/order/order-submit/order-submit?submit=${JSON.stringify(
        submitOrder
      )}&pt_number=${this.pt_number}`;
      this.$utils.toUrl(url);
    },
  },
  computed: {},
  watch: {},
  filters: {
    priceBeforeZero(val) {
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.length);
    },
  },
  // 触底加载
  onReachBottom() {
    this.getList();
  },
  onShareAppMessage() {
    const storeId = uni.getStorageSync("store_id");
    let userInfo = uni.getStorageSync("userInfo");
    const userId = userInfo && userInfo.id > 0 ? userInfo.id : 0;

    return {
      path: `/pt/detail/index?store_id=${storeId}&user_id=${userId}&id=${this.goods.id}&pt_number=${this.pt_number}`,
      title: `快来一起拼团，${this.goods.name}`,
    };
  },
  // 页面隐藏
  onHide() {
    clearInterval(this.timer);
  },
  // 页面卸载
  onUnload() {
    clearInterval(this.timer);
  },
};
</script>
<style lang="scss" scoped>
.page-body {
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  background: linear-gradient(
    to bottom,
    #f0250e 0,
    #f0250e 384rpx,
    #f0250e 384rpx,
    #f2f2f2 548rpx,
    #f2f2f2 100%
  );
  .header {
    .pt-msg {
      display: flex;
      align-items: center;
      > view {
        display: flex;
        align-items: center;
        padding-right: 20rpx;
        height: 44rpx;
        background: rgba($color: #000000, $alpha: 0.2);
        border-radius: 120rpx;

        color: #ffffff;
        font-size: 20rpx;
        .user-img {
          width: 40rpx;
          height: 40rpx;
          background: #ffffff;
          border-radius: 120rpx;
          margin-right: 10rpx;
        }
      }
    }

    .invitation {
      margin-top: 24rpx;
      background: #fff;
      border-radius: 20rpx;
      padding: 30rpx 24rpx;
      text-align: center;

      .count-down {
        font-weight: 600;
        /deep/.u-countdown-item {
          padding: 4rpx;
          &:nth-last-child(1) {
            background: #f0250e !important;
          }
        }
      }

      .user-list {
        padding-top: 44rpx;
        padding: 44rpx 30rpx 30rpx;

        display: inline-block;
        white-space: nowrap;
        // align-items: center;
        // justify-content: center;
        .user {
          display: inline-block;
          margin-left: 22rpx;
          position: relative;
          min-width: 92rpx;
          height: 92rpx;
          border: 4rpx solid #b6b6b6;
          border-radius: 50%;
          &:nth-child(1) {
            margin-left: 0;
            border-color: #f0250e;
          }
          .sponsor {
            position: absolute;
            top: 0;
            left: 50%;
            z-index: 9;
            transform: translate(-50%, -50%);
            width: 92rpx;
            line-height: 36rpx;
            font-size: 20rpx;
            background: #f0250e;
            border-radius: 120rpx;
            color: #fff;
          }
          .user-avatar {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            line-height: 92rpx;
            text-align: center;
            font-size: 60rpx;
            color: #b6b6b6;
            > image {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
        }

        .user-1 {
          border-style: dashed;
        }
      }
    }

    .bts {
      display: flex;
      .yq,
      .buy {
        flex: 1;
        line-height: 80rpx;
        background: linear-gradient(91deg, #faa60f 0%, #fbbc10 100%);
        box-shadow: 0rpx 6rpx 12rpx rgba(250, 166, 15, 0.2);
        opacity: 1;
        border-radius: 120rpx;
        text-align: center;
        color: #fff;
        font-size: 32rpx;
        font-weight: 600;
      }
      .buy {
        background: linear-gradient(91deg, #f22407 0%, #f84d17 100%);
        box-shadow: 0rpx 6rpx 12rpx rgba(240, 37, 14, 0.2);
      }
    }
  }

  .pt-lc {
    padding: 30rpx 24rpx;
    .title {
      line-height: 40rpx;
      font-size: 28rpx;
      font-weight: 600;
      margin-bottom: 30rpx;
    }
    .lc-list {
      display: flex;
      justify-content: space-between;
      padding-left: 10rpx;
      padding-bottom: 30rpx;
      margin-bottom: 24rpx;
      border-bottom: 1px solid #f2f2f2;

      .iconfont {
        flex: 1;
        width: 0;
        padding-left: 20rpx;
        color: #999;
        font-size: 24rpx;
      }
    }
    .pt-gz-box {
      display: flex;
      font-size: 24rpx;
      .left {
        flex: 1;
        width: 0;
      }
    }
  }
}
</style>
